<script lang="ts">
import {NIcon, useDialog} from 'naive-ui'
import {Menu, LogInOutline, CaretDownSharp} from '@vicons/ionicons5'
import useUserStore from '@/stores/modules/user'
import {useRouter} from 'vue-router'

import Avatar from '@/assets/img_avatar_default.png'

export default defineComponent({
  name: 'VAWAvatar',
  components: {CaretDownSharp},
  setup() {
    console.log('user-config-store------>>>', JSON.stringify(useUserStore()))
    const userStore = useUserStore()
    userStore.avatar = Avatar
    const router = useRouter()
    const options = [
      {
        label: '个人中心',
        key: 'personal-center',
        icon: () =>
            h(NIcon, null, {
              default: () => h(Menu),
            }),
      },
      {
        label: '退出登录',
        key: 'logout',
        icon: () =>
            h(NIcon, null, {
              default: () => h(LogInOutline),
            }),
      },
    ]

    function personalCenter() {
      router.push('/user')
    }

    const dialog = useDialog()
    function logout() {
      dialog.warning({
        title: '提示',
        content: '是否要退出当前账号？',
        positiveText: '退出',
        negativeText: '再想想',
        onPositiveClick: () => {
          userStore.logout().then(() => {
            window.location.reload()
          })
        },
      })
    }
    function handleSelect(key: string) {
      switch (key) {
        case 'personal-center':
          personalCenter()
          break
        case 'logout':
          logout()
          break
      }
    }

    return {
      userStore,
      options,
      handleSelect,
    }
  },
})
</script>

<template>
  <div class="vaw-avatar-container">
    <n-dropdown trigger="hover" :options="options" size="large" @select="handleSelect">
      <div class="action-wrapper">
        <div class="avatar">
          <n-avatar circle size="small" :src="userStore.avatar" />
        </div>
        <span class="nick-name">
          {{ userStore.nickName }}
          <n-icon class="tip">
            <CaretDownSharp/>
          </n-icon>
        </span>
      </div>
    </n-dropdown>
  </div>
</template>

<style lang="scss" scoped>
.vaw-avatar-container {
  .action-wrapper {
    display: flex;
    align-items: center;

    .avatar {
      width: calc(48px - 15px);
      height: calc(48px - 15px);
      display: flex;
      align-items: center;

      & > img {
        border: 1px solid #f6f6f6;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }
    }

    .nick-name {
      margin: 0 5px;

      .tip {
        transform: rotate(0);
        transition: transform 0.3s ease;
        margin-left: 2px;
      }
    }
  }
}

.vaw-avatar-container:hover {
  cursor: pointer;
  color: var(--primary-color);

  .nick-name .tip {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
  }
}
</style>
